<script setup lang="ts">
import { ArrowRight, List } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { onMounted } from "vue";
import userStore from '../store/UserStore';
import createAxios from "../request";
import { Vacation, Vacation_Type } from '../model';
import { da } from 'element-plus/lib/locale/index.js';

    let axios = createAxios();
let store = userStore();
let s =store.getAccount;

const date1 = new Date();
const date2 = new Date();
let data = reactive({
    "days":0,
            "Vacation":{
                
                "empno":store.getEmpno,
                "vacation_id": 0,
                "limitt":0,
                "start_date":date1,
                "end_date":date2,
                "duration":0,
                "vacation_reason":""
            },
            
        });
       
        const gdays = function (vacation_id:number){
            let data2 = reactive({
           
          "dvo":{
                "empno":store.getEmpno,
                "vacation_id": vacation_id,
            }
            
        });
            axios({
            url: `/selectday`,
            method: "POST",
            data:data2.dvo
        }).then((res)=>{
            //请求成功
            data.days = res.data;
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })

        }
const date = function (){
function getDaysBetweenDates(date1: Date, date2: Date): number {
    // 将Date对象转换为时间戳
    const timestamp1 = date1.getTime();
    const timestamp2 = date2.getTime();
 
    // 计算差值
    const difference = timestamp2 - timestamp1;
 
    // 转换为天数
    return Math.ceil(difference / (1000 * 60 * 60 * 24)) ;
}
data.Vacation.duration = getDaysBetweenDates(data.Vacation.start_date, data.Vacation.end_date);
}
    let list1:Array<Vacation_Type> = [];
    let tableData = reactive({
            "list": list1
        });
        const submit = function (){
           if(data.Vacation.duration>data.days&&data.Vacation.vacation_id!=0){
            ElMessage.warning("假期不足");
            return;
           }
        axios({
            url: `/Vacationadd`,
            method: "POST",
            data:data.Vacation
        }).then((res)=>{
            //请求成功
            ElMessage.success("成功");
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })
    }
        const getData = function (){
        axios({
            url: `/Vacationtypelist`,
            method: "GET"
        }).then((res)=>{
            //请求成功
            tableData.list = res.data;
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })
    }
    const getDate = function (){
        axios({
            url: `/Vacationtypelist`,
            method: "GET"
        }).then((res)=>{
            //请求成功
            tableData.list = res.data;
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })
    }
    const up = function(tt:Vacation_Type)
    {
        data.Vacation.limitt=tt.limitt;
        data.Vacation.vacation_id=tt.vacation_id;
        gdays(data.Vacation.vacation_id);
    }
    onMounted(() => {
    
    });

interface RuleForm {
    name: string
    region: string
    count: string
    date1: string
    date2: string
    delivery: boolean
    location: string
    type: string[]
    resource: string
    desc: string
    num: string
    reason: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    region: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    location: '',
    type: [],
    resource: '',
    desc: '',
    num: '',
    reason: ''
})


// const rules = reactive<FormRules<RuleForm>>({
//     name: [
//         { required: true, message: 'Please input Activity name', trigger: 'blur' },
//         { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
//     ],
//     num: [
//         { required: true, message: 'Please input Activity name', trigger: 'blur' },
//         { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
//     ],
//     reason: [
//         { required: true, message: 'Please input Activity name', trigger: 'blur' },
//         { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
//     ],
//     region: [
//         {
//             required: true,
//             message: 'Please select Activity zone',
//             trigger: 'change',
//         },
//     ],
//     count: [
//         {
//             required: true,
//             message: 'Please select Activity count',
//             trigger: 'change',
//         },
//     ],
//     date1: [
//         {
//             type: 'date',
//             required: true,
//             message: 'Please pick a date',
//             trigger: 'change',
//         },
//     ],
//     date2: [
//         {
//             type: 'date',
//             required: true,
//             message: 'Please pick a time',
//             trigger: 'change',
//         },
//     ],
//     location: [
//         {
//             required: true,
//             message: 'Please select a location',
//             trigger: 'change',
//         },
//     ],
//     type: [
//         {
//             type: 'array',
//             required: true,
//             message: 'Please select at least one activity type',
//             trigger: 'change',
//         },
//     ],
//     resource: [
//         {
//             required: true,
//             message: 'Please select activity resource',
//             trigger: 'change',
//         },
//     ],
//     desc: [
//         { required: true, message: 'Please input activity form', trigger: 'blur' },
//     ],
// })

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<template>
    <el-container id="mainView">
        <el-header style="background-color: #272822; color: #E5E5E5; line-height: 60px; font-size: 27px;">申请休假</el-header>
        <el-footer style="height: 30px; line-height: 30px; background-color: #4E5246; border-bottom:1px solid #7A7A7A; border-top:1px solid #7A7A7A;">
        <el-breadcrumb :separator-icon="ArrowRight" style="line-height: 30px;">
            <el-breadcrumb-item :to="{ path: '/home/homepage' }"><el-icon><House /></el-icon>首页</el-breadcrumb-item>
            <el-breadcrumb-item>时间管理</el-breadcrumb-item>
            <el-breadcrumb-item>申请休假</el-breadcrumb-item>
        </el-breadcrumb>
        </el-footer>
        <el-main style="padding-bottom: 0%;">
            <el-card style="width: 100%; line-height: 55px;">
                <div class="card">
                    <span style="color: #E5E5E5; line-height: 30px;">
                        <el-icon><List /></el-icon>
                        填写休假信息
                    </span> <el-divider style="margin-bottom: 20px; margin-top: 0px;" />
                    <div class="form_item">
                        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm"  label-width="auto"
                        class="demo-ruleForm" :size="formSize" status-icon>
                        <el-form-item label="申请人">
                                {{s}}
                            </el-form-item>
                            <el-form-item label="休假日期" required>
                                <el-col :span="11">
                                    <el-form-item prop="date1">
                                        <el-date-picker v-model="data.Vacation.start_date" type="date" aria-label="Pick a date"
                                            placeholder="Pick a date" style="width: 100%" />
                                    </el-form-item>
                                </el-col>
                                <el-col class="text-center" :span="2">
                                    <span class="text-gray-500">&nbsp;&nbsp;----</span>
                                </el-col>
                                <el-col :span="11">
                                    <el-form-item prop="date2">
                                        <el-date-picker v-model="data.Vacation.end_date" @blur="date" type="date" aria-label="Pick a date"
                                            placeholder="Pick a date" style="width: 100%" />
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="假期类型" prop="region">
                                <el-select v-model="tableData.list" placeholder="请选择假期类型"  @click="getData">
                                    <el-option  v-for="item in tableData.list"
                                                    :key="item.vacation_id"
                                                    :label="item.vacation_name"
                                                    :value="item.limitt"
                                                    @click="up(item)"
                                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item v-if="data.Vacation.limitt!=0" label="可用天数">
                                {{data.days}}
                            </el-form-item>
                            <el-form-item v-if="data.Vacation.limitt==0" label="可用天数">
                                无天数限制
                            </el-form-item>
                            <el-form-item label="请假天数" prop="num">
                                <!-- <el-input v-model="data.Vacation.duration" type="number" /> -->
                                 {{ data.Vacation.duration }}
                            </el-form-item>
                            <el-form-item label="请假理由" prop="reason">
                                <el-input v-model="data.Vacation.vacation_reason" />
                            </el-form-item>
                            <div style="display: flex; justify-content: center;"> 
                                <el-form-item>
                                    <el-button type="primary" @click="submit">
                                        提交
                                    </el-button>
                                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<style scoped>

   #mainView{
    height: 100%;
    width: 100%;
  }

  
  .form_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

</style>